<template>
  <div class="activity">
    <div class="newest-activity-list" v-for="(item,index) in activityList" :key="index" @click="navigateToActivityDetails(item)">
      <div class="newest-activity-left"><img :src="item.img_url" mode="widthFix"></div>
      <div class="newest-activity-right">
        <div class="newest-activity-name">{{item.name}}</div>
        <div class="newest-activity-start">{{item.start_time}}</div>
        <div class="newest-activity-num">
          <div class="newest-activity-num-left">浏览量:{{item.browse_num}}</div>
          <div class="newest-activity-num-right">已报名人数:{{item.join_num}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wxParse from 'mpvue-wxparse'
export default {
  data(){
    return {
      activityList:[],
      limit: 6, //活动条数
      page: 0, //页码
    }
  },
  onShow () {
    this.page = 1;
    this.reqActivityList('onPullDownRefresh');
  },
  //上拉加载
  onReachBottom () {
    this.page++;
    this.reqActivityList();
  },
  //下拉刷新
  onPullDownRefresh () {
    this.page = 1;
    this.reqActivityList('onPullDownRefresh');
  },
  components:{
    // activityList
  },
  methods:{
    // 获取活动列表
    async reqActivityList(type){
      let params = {
        limit:this.limit,
        page:this.page,
      };
      let res = await this.$api.getActivityList(params);
      wx.stopPullDownRefresh()
      if(res.data.level == "success"){
        let data= res.data.activities;
        data.forEach(item => {
          item.start_time = item.start_time.split(' ')[0];
        });
        if(type == 'onPullDownRefresh'){
          this.activityList = data;
        }else{
          this.activityList = this.activityList.concat(data);
        }
      }else{
        wx.showToast({
          title: '获取活动列表失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //跳转到活动详情
    navigateToActivityDetails(activity){
      wx.navigateTo({
        url: '/pages/activityMain/activityDetails/main?id=' + activity.id
      })
    },
    //跳转到年会座位
    navigateToSeat(){
      wx.navigateTo({
        url: '/pages/activityMain/seat/main'
      })
    },
    //跳转到现场签到页面
    navigateToSignActivity(){
      wx.navigateTo({
        url: '/pages/activityMain/signActivity/main'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .activity{
    width: 100%;
    min-height: 100vh;
    background-color: #f1f1f1;
    padding-bottom: 20rpx;
    .newest-activity-list{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 2rpx;
      padding: 20rpx 0;
      background-color: #fff;
      .newest-activity-left{
        width: 300rpx;
        height: 180rpx;
        overflow: hidden;
        border-radius: 12rpx;
        img{
          width: 100%;
          border-radius: 12rpx;
        }
      }
      .newest-activity-right{
        font-size: 30rpx;
        color: #333;
        margin-left: 22rpx;
        .newest-activity-name{
          width: 320rpx;
          line-height: 44rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          color: 666;
        }
        .newest-activity-start{
          margin-top:10rpx;
          font-size: 24rpx;
          color: #979696;
          height: 44rpx;
          line-height: 44rpx;
        }
        .newest-activity-num{
          font-size: 24rpx;
          color: #979696;
          height: 44rpx;
          line-height: 44rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
</style>